<template>
  <div class="pageMain">
    <div class="title">
      {{ $t('userSetting.title') }}
    </div>
    <div class="accountSetting">
      <el-form ref="form" v-model="info" style="background-color: #FFFFFF" label-width="160px">
        <el-form-item :label="$t('userSetting.ava')">
          <el-upload
              class="avatar-uploader"
              :action="$assetsURL + '/addons/ldcms/api.v1/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="info.avatar" style="width: 86px;height: 86px;border-radius: 50%" :src="$assetsURL + info.avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item :label="$t('userSetting.nickname')">
          <el-input style="width: 300px" size="medium" v-model="info.nickname"></el-input>
        </el-form-item>
        <el-form-item :label="$t('userSetting.phone')">
          <el-input style="width: 300px" size="medium" v-model="info.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 150px;height: 42px;color: #FFFFFF"  @click="sumbit">{{ $t('userSetting.save') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>

import {getUserProfile, setUserProfile} from "@/api/user";

export default {
  name: "productClass",
  data: () => ({
    info: {
      avatar: "",
      nickname: '',
      phone: ""
    }
  }),
  created() {
    this.getUserInfo()
  },
  computed:{
    userInfo(){
      return this.$store.state.userInfo
    }
  },
  methods:{
    sumbit(){
      setUserProfile({nickname: this.info.nickname,avatar:this.info.avatar}).then(res => {

        this.$message.success("修改成功")
        this.getUserInfo()
      })
    },
    getUserInfo(){
      getUserProfile().then(res => {
        this.$nextTick(() =>{
          this.info = {
            avatar: res.data.avatar,
            nickname: res.data.nickname,
            mobile: res.data.mobile
          }
        })
        this.$store.commit('setUserInfo',res.data)
        localStorage.setItem("UserInfo", JSON.stringify(res.data));
      })
    },
    handleAvatarSuccess(res){

      if (res.code == 1){
        this.info.avatar = res.data.url
      }else {
        this.$message.warning("上传失败")
      }
    }
  }
}
</script>


<style scoped lang="less">
.pageMain {
  width: 100%;
  background-color: #F6F6F6;
  padding: 50px 0;

  .title {
    width: 1200px;
    margin: 0 auto 20px auto;
    font-weight: bold;
    color: #333333;
    font-size: 24px;
  }

  .accountSetting {
    background-color: #FFFFFF;
    width: 1200px;
    margin: 0 auto;
    padding: 50px 100px;
    border-radius: 20px;
  }
}
</style>